<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增动账信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-user-add" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-3 control-label">动账时间：</label>
            <!--				<div class="col-sm-8">-->
            <!--					<input class="form-control" type="text" name="userCode" id="userCode" required>-->
            <!--				</div>-->
            <div class="input-group date">
                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input type="text" class="form-control" name="oprDate" id="oprDate" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">用户：</label>
            <div class="col-sm-3">
                <div class="radio">
                    <label>
                        <input type="radio" checked="" value="文豪" id="optionsRadios1" name="userName">文豪</label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" value="蒙蒙" id="optionsRadios2" name="userName">蒙蒙</label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" value="共同" id="optionsRadios3" name="userName">共同</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">操作类型：</label>
            <div class="col-sm-8">
                <div class="radio check-box">
                    <label>
                        <input type="radio" checked="" value="存入" name="tranType"> <i></i> 存入</label>
                </div>
                <div class="radio check-box">
                    <label>
                        <input type="radio" value="取出" name="tranType"> <i></i> 取出</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">交易金额：</label>
            <div class="col-sm-8">
                <input class="form-control" type="number" name="amount" id="amount">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注（选填）：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="remark" id="remark">
            </div>
        </div>
        <div class="form-group">
            <input type="hidden" name="imageFile" id="base64_code">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                     style="width: 200px; height: 150px;"></div>
                <div>
                    <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span
                            class="fileinput-exists">更改</span>
                        <input id="sss" type="file" oninput="handleInput"/>
                    </span>
                    <a href="javascript:;" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jasny-bootstrap-js"/>
<script type="text/javascript">
    $("#oprDate").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        initialDate: new Date(),
        autoclose: true
    });

    var prefix = ctx + "finance/dzxx";

    $("#form-user-add").validate({
        onkeyup: false,
        rules: {
            oprDate: {
                required: true
            },
            userName: {
                required: true
            },
            tranType: {
                required: true
            },
            amount: {
                required: true
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var file = document.getElementById('sss').files[0];
            if (file != null) {
                $('#base64_code').val(file.result);
            }
            $.operate.save(prefix + "/add", $('#form-user-add').serialize(), () => {
                window.refreshTab();
            });

        }
    }

    function handleInput(e) {
        console.log("debug", e)
    }

</script>
<script>
    $(document).ready(function () {
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month) + "-" + (day);
        $(":input[ name = 'oprDate' ]").val(today)
    })
</script>
</body>
</html>
